#{extends 'main.html' /}
#{set title:'performSubsitution.html' /}

#{extends 'main.html' /}
#{set title:'substitute.html' /}

<h1>Selected UI Elements for Substitution:</h1>
<h3>Click on the element to keep during the substitution process:</h3>
<ul>
%{
     for(webApp in loadedApps) { 

				for(elem in webApp.getSelectedUIElementsForSubstitutionsHtmlIds()) {
}%
		<li>
%{
					out.print(elem.getHtmlRepresentation());
}%
		</li>
%{
				}
}%
			<script>
%{
				for(elem in webApp.getSelectedUIElementsForSubstitutionsHtmlIds()) {
}%
					$('#${elem.getHtmlId()}').hover(
						function () {
							$(this).addClass("selectable");
							$(this).bind('click',
								function() {
									$('#substitutionElementIdToKeep').val('${elem.getId()}');
									$('#keepElementSubstitutionForm').submit();
								}
							);
						},
						function () {
							$(this).removeClass("selectable");
							$(this).unbind('click');
						}
					);
%{
				}
}%
			</script>
%{
     }
}%
</ul>
<form id="keepElementSubstitutionForm" method="POST" action="@{Composition.selectKeepElementForSubstitution()}">
	<input id="substitutionElementIdToKeep" type="hidden" name="elementId" value="" />
</form>
